<template>
	<view class='recommend'>
		<view class="common-hd">
			<!-- <view class="title">为你推荐</view> -->
			<view class="title">精选推荐</view>
		</view>
		<view class='recommendList' :class="indexP?'on':''">
			<view class="left_box">
				<view class='item' v-for="(item,index) in leftList" :key="index" hover-class='none' @tap="goDetail(item)">
					<view class='pictrue'>
						<image :src='item.image'></image>
						<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '1'">秒杀</span>
						<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '2'">砍价</span>
						<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '3'">拼团</span>
					</view> 
					<!-- <view class="same">
						<text>看相似</text>
					</view> -->
					<view class="text">
						<view class='name line2'>
							<text 
								v-if="item.product_type == 0 && item.merchant.type_name" 
								class="font-bg-red"
							>{{item.merchant.type_name}}</text>
							<text 
								v-else-if="item.product_type == 0 && item.merchant.is_trader" 
								class="font-bg-red"
							>自营</text>
							<span 
								v-if="item.product_type != 0" 
								:class="'font_bg-red type'+item.product_type"
							>{{
								item.product_type == 1 ? "秒杀" : 
								item.product_type == 2 ? "预售" : 
								item.product_type == 3 ? "助力" : 
								item.product_type == 4 ? "拼团" : ""
							}}
							</span>
							{{item.store_name}}
						</view>
						<!-- <view class="tag">
							<span>5折优惠</span>
							<span>618特价</span>
							<span>直降￥12</span>
						</view> -->
						<view class="acea-row row-middle">
							<view class='money font-color'>￥<text class='num'>{{item.price}}</text></view>
							<del style="font-size: 24rpx; color: #999;">￥{{ item.ot_price }}</del>
							<!-- <text class="coupon font-color-red" v-if="item.issetCoupon">领券</text> -->
							<!-- <image src="/static/images/jiagou.png" mode=""></image> -->
						</view>
						<view class="jifen">
							<image src="/static/images/jifen.png" mode=""></image>
							<text>赠送金币{{ item.coin }}</text>
							<span>({{ item.coin_percen }}%赠送)</span>
						</view>
					</view>
				</view>
			</view>
			<view class="right_box">
				<view class='item' v-for="(item,index) in rightList" :key="index" hover-class='none' @tap="goDetail(item)">
					<view class='pictrue'>
						<image :src='item.image'></image>
						<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '1'">秒杀</span>
						<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '2'">砍价</span>
						<span class="pictrue_log_big pictrue_log_class" v-if="item.activity && item.activity.type === '3'">拼团</span>
					</view> 
					<!-- <view class="same">
						<text>看相似</text>
					</view> -->
					<view class="text">
						<view class='name line2'>
							<text 
								v-if="item.product_type == 0 && item.merchant.type_name" 
								class="font-bg-red"
							>{{item.merchant.type_name}}</text>
							<text 
								v-else-if="item.product_type == 0 && item.merchant.is_trader" 
								class="font-bg-red"
							>自营</text>
							<span 
								v-if="item.product_type != 0" 
								:class="'font_bg-red type'+item.product_type"
							>{{
								item.product_type == 1 ? "秒杀" : 
								item.product_type == 2 ? "预售" : 
								item.product_type == 3 ? "助力" : 
								item.product_type == 4 ? "拼团" : ""
							}}
							</span>
							{{item.store_name}}
						</view>
						<!-- <view class="tag">
							<span>5折优惠</span>
							<span>618特价</span>
							<span>直降￥12</span>
						</view> -->
						<view class="acea-row row-middle">
							<view class='money font-color'>￥<text class='num'>{{item.price}}</text></view>
							<del style="font-size: 24rpx; color: #999;">￥{{ item.ot_price }}</del>
							<!-- <text class="coupon font-color-red" v-if="item.issetCoupon">领券</text> -->
							<!-- <image src="/static/images/jiagou.png" mode=""></image> -->
						</view>
						<view class="jifen">
							<image src="/static/images/jifen.png" mode=""></image>
							<text>赠送金币{{ item.coin }}</text>
							<span>({{ item.coin_percen }}%赠送)</span>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	// +----------------------------------------------------------------------
	// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
	// +----------------------------------------------------------------------
	// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
	// +----------------------------------------------------------------------
	// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
	// +----------------------------------------------------------------------
	// | Author: CRMEB Team <admin@crmeb.com>
	// +----------------------------------------------------------------------
	import {mapGetters} from "vuex";
	import { goShopDetail } from '@/libs/order.js'
	import {openBargainSubscribe} from '@/utils/SubscribeMessage.js';
	import {initiateAssistApi} from '@/api/activity.js';
	import {toLogin} from '@/libs/login.js';
	export default {
	computed: mapGetters(['uid']),
		props: {
			hostProduct: {
				type: Array,
				default: function() {
					return [];
				}
			},
			indexP:{
				type: Boolean,
				default: false
			},
			isLogin:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				leftList: [],
				rightList: []
			};
		},
		created() {
			for(let i=0;i<this.hostProduct.length;i++) {
			  if(i%2==0) {
			    this.leftList.push(this.hostProduct[i])
			  }else{
			    this.rightList.push(this.hostProduct[i])
			  }
			}
		},
		watch: {
			hostProduct(arr, newArr) {
				// console.log('触发了')
				if(arr.length == 0) return
				for(let i=0;i<arr.length;i++) {
				  if(i%2==0) {
				    this.leftList.push(arr[i])
				  }else{
				    this.rightList.push(arr[i])
				  }
				}
			}
		},
		methods: {
			goDetail(item){
				goShopDetail(item, this.uid).then(res => {
				if (this.isLogin) {
						initiateAssistApi(item.activity_id).then(res => {
							let id = res.data.product_assist_set_id;
							uni.hideLoading();
							// #ifndef MP
							uni.navigateTo({
								url: '/pages/activity/assist_detail/index?id=' + id
							});
							// #endif
							// #ifdef MP
							openBargainSubscribe().then(res => {
								uni.hideLoading();
								uni.navigateTo({
									url: '/pages/activity/assist_detail/index?id=' + id
								});
							}).catch((err) => {
								uni.hideLoading();
							});
							// #endif					
						}).catch((err) => {
							uni.showToast({
								title: err,
								icon: 'none'
							})
						});
					} else {
						// #ifdef H5 || APP-PLUS
						toLogin();
						// #endif 
						// #ifdef MP
						this.$emit('isShowAuth', true);
						this.$emit('isAuto', true);
						// #endif
					}
				})		
			}
		}
	}
</script>

<style scoped lang="scss">
	.common-hd {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 118rpx;
	
		.title {
			padding: 0 80rpx;
			font-size: 34rpx;
			color: $theme-color;
			font-weight: bold;
			background-image: url("~@/static/images/jingpin.png");
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: left center;
		}
	}

	.recommend .recommendList {
		padding: 0 20rpx;
	}
	.recommendList {
		display: flex;
		justify-content: space-between;
		.left_box, .right_box {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 49%;
		}
	}
	.recommend .recommendList.on{
		padding: 0;
	}
	.recommend .recommendList .item {
		width: 340rpx;
		margin-bottom: 30rpx;
		background-color: #fff;
		border-radius: 16rpx;
		padding-bottom: 20rpx;
		.same {
			display: flex;
			justify-content: flex-end;
			width: 100%;
			text {
				display: block;
				background-color: #e3e3e3;
				padding: 8rpx 30rpx;
				border-radius: 30rpx 0 0 30rpx;
				color: #666;
			}
		}
		.tag {
			display: flex;
			flex-wrap: wrap;
			width: 100%;
			margin: 20rpx 0;
			span {
				background-color: #F00;
				color: #fff;
				font-size: 24rpx;
				padding: 0 10rpx;
				border-radius: 20rpx;
				margin-right: 10rpx;
				margin-bottom: 10rpx;
			}
		}
		.row-middle {
			display: flex;
			align-items: flex-end;
			// justify-content: space-between;
			flex-wrap: nowrap;
			margin-bottom: 10rpx;
			image {
				width: 45rpx;
				height: 45rpx;
			}
			del {
				text-decoration: line-through
			}
		}
		.jifen {
			display: flex;
			align-items: center;
			width: 100%;
			font-size: 20rpx;
			image {
				width: 30rpx;
				height: 30rpx;
			}
			text {
				color: #ff9c00;
				margin-left: 5rpx;
			}
			span {
				color: #F00;
				margin-left: 10rpx;
			}
		}
	}	
	.recommend .recommendList .item .text{
		padding: 0 20rpx;
	}	
	.recommend .recommendList .item .coupon{
		background:rgba(255,248,247,1);
		border:1px solid rgba(233,51,35,1);
		border-radius:4rpx;
		font-size:20rpx;
		margin-left: 18rpx;
		padding: 1rpx 4rpx;
	}

	.recommend .recommendList .item .pictrue {
		position: relative;
		width: 100%;
		height: 345rpx;
	}

	.recommend .recommendList .item .pictrue image {
		width: 100%;
		height: 100%;
		border-radius: 16rpx 16rpx 0 0;
	}

	.recommend .recommendList .item .name {
		font-size: 28rpx;
		color: #282828;
		margin: 20rpx 0 10rpx 0;
	}

	.recommend .recommendList .item .money {
		font-size: 20rpx;
		font-weight: bold;
	}

	.recommend .recommendList .item .money .num {
		font-size: 34rpx;
	}
</style>
